<template>
  <div class="container">
      <div class="gallery">
        <router-link :to="{path:'/gallery/detail', query:{post_data:item}}" v-for="(item,i) in posts"  :key="i">
            <div class="post" :style='{background:"url("+item.images[0]+")",backgroundSize: 330+"px", backgroundRepeat:"no-repeat"}'>
                <div class="content">
                    <p class="title">{{item.post_title}}</p>
                    <p class="summary">{{item.summary}}</p>
                </div>
            </div>
        </router-link>
      </div>

      <div class="loading" v-if="!loaded">
           <h2>加载中,等一小下</h2>
           <div class="rect"></div>
      </div>

      <div class="warning">
        <h2>{{warning}}</h2>
        
      </div>  
      
      <div class="btn-group">
        <button @click="getMorePosts">加载更多</button>
      </div> 
    
  </div>
</template>

<script>
export default{
    data(){
        return {
            loaded:false,
            page:0,
            posts:[],
            warning:''
        }
    },
    mounted:function(){
        this.$store.commit('setTitle','gallery');
        this.$store.commit('switchIsOriginPath',true);
        this. getGallery(); 
        if(this.$cookies.get('user_name')!=null&&this.$cookies.get('password')!=null){
            this.autoLogin();
        }
    },
    methods:{
        getGallery(){
            var page={page:this.page};
            this.loaded=false;
            this.$http.get(this.$store.state.server_home_url+'/gallery',{params:page}).then((res) => {
                if(res.body.data.length==0){
                    this.warning='已无更多';
                }else{
                    this.posts=this.posts.concat(res.body.data);
                    this.warning='';
                    
                }
                this.loaded=true;
                
            },(err) => {
                this.warning='服务器连接失败！';
                console.log(err);
            })         
        },
        getMorePosts(){
            this.page++;
            this.getGallery();
        },
        autoLogin(){
            var msg={
                user_name:this.$cookies.get('user_name'),
                password:this.$cookies.get('password')
            }
            this.$http.get(this.$store.state.server_home_url+'/login',{params:msg}).then((res) => {
                    
                var user_data={
                    user_name:msg.user_name,
                    password:msg.password,
                    user_icon:res.body.icon
                };
                this.$store.commit('setIsLogin',user_data);
                this.$router.push({path:'/gallery'});
            },(err) => {
                console.log(err);
            })        
        }
    },

}
</script>


<style lang="scss" scoped>
    .container{
        .gallery{
             margin:30% auto 0 auto;
            .post{
                margin: 35px auto;
                padding-top:100px;
                border-radius: 10px 10px;
                width:290px;
                height: 80px;
                box-shadow: black 8px 8px 8px;
                .content{
                    background: rgba($color: #000000, $alpha: 0.5);
                    padding: 5px 4% 0px 4%;
                    width: 92%;
                    height: 75px;
                    overflow: hidden;
                    border-radius: 0px 0px 10px 10px;

                    p{  
                        word-wrap: break-word;
                        margin:0;
                        padding:0;
                        color:white;

                    }
                    .title{
                        font-size: 15px;
                    }
                    .summary{
                        font-size: 10px;
                    }
                }
            }          
        }

        .btn-group{
            margin-bottom: 30px;
            button{
                display: block;
                margin:0 auto;
                width: 50%;
                height: 50px;
                border-radius: 15px 15px;
                font-size: 18px;
                background: black;
                color:white;
            }
        }

        .loading{
            h2{
                text-align: center;
                color:green;
            }
            @keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-moz-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-webkit-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }

            @-o-keyframes myfirst{
            from {margin-left:10%;}
            to {margin-left:80%;}
            }            
            .rect{
                width:35px;
                height:35px;
                background: greenyellow;
                animation: myfirst 2s infinite;
                -moz-animation: myfirst 2s infinite;	/* Firefox */
                -webkit-animation: myfirst 2s infinite;	/* Safari 和 Chrome */
                -o-animation: myfirst 2s infinite;	/* Opera */
            }         
        }
        .warning{
            h2{
                text-align: center;
                color:red;
            }
        }  
    }
</style>
